import React, { PureComponent } from "react";
import { List, Checkbox, Button, Input, Divider, notification } from "antd";
import Req from "../common/Req";
export default class CartPage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      settlementIds: [],
      totalPrice: 0,
      address: "",
      datas: [
        {
          name: "sdsds",
          imgUrl:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=611003720,1685646431&fm=27&gp=0.jpg",
          tenancy: 3,
          count: 5,
          price: 12.99,
          specification: "100kg,180m",
          id: 222
        }
      ]
    };
  }

  loadDatas() {
    Req(
      "http://localhost:8080/order?orderState=unpaid",
      {},
      this.props.history,
      resp => this.setState({ datas: resp.data })
    );
  }

  componentWillMount() {
    this.loadDatas();
  }

  render() {
    return (
      <div style={{ background: "#ffffff", marginTop: 20 }}>
        <List
          header={<div>我的购物车</div>}
          footer={
            <div>
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center"
                }}
              >
                <div>
                  收货地址（<span style={{ color: "red" }}>必填</span>）
                </div>
                <Input
                  placeholder="请按照 省-市-县-村-门牌号 方式填写"
                  style={{ flex: 1, marginLeft: 20 }}
                  onChange={e => this.setState({ address: e.target.value })}
                />
              </div>
              <Divider />
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between"
                }}
              >
                <div>
                  总计：<span style={{ color: "red" }}>
                    {this.state.totalPrice}
                  </span>
                  元
                </div>
                <Button
                  type="primary"
                  onClick={() => {
                    let params = {
                      orderids: this.state.settlementIds,
                      addr: this.state.address
                    };

                    Req(
                      "http://localhost:8080/order/settlement",
                      {
                        method: "POST",
                        headers: {
                          "Content-type": "application/json"
                        },
                        body: JSON.stringify(params)
                      },
                      this.props.history,
                      resp => {
                        if (
                          resp.code === 100 &&
                          resp.data.status === "SUCCESS"
                        ) {
                          this.loadDatas();
                          notification["success"]({
                            message: "结算成功",
                            description: "请等待卖家发货"
                          });
                        } else {
                          notification["error"]({
                            message: "结算失败",
                            description: "请稍后重试"
                          });
                        }
                      }
                    );
                  }}
                >
                  结算
                </Button>
              </div>
            </div>
          }
          bordered
          dataSource={this.state.datas}
          renderItem={item => (
            <List.Item>
              <div
                style={{
                  width: "100%",
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between",
                  alignItems: "center"
                }}
              >
                <div>
                  <Checkbox
                    onChange={e => {
                      let settlementIds = this.state.settlementIds;
                      if (e.target.checked) {
                        settlementIds.push(item.id);
                        let totalPrice = this.state.totalPrice;
                        totalPrice += item.price * item.tenancy * item.count;
                        this.setState({ totalPrice: totalPrice });
                      } else {
                        // todo js数组没有remove方法，暂时不实现
                        // settlementIds.remove(item.id);
                      }
                      this.setState({ settlementIds: settlementIds });
                    }}
                  />
                </div>
                <div>
                  <img
                    alt=""
                    style={{ width: 60, height: 60 }}
                    src={item.imgUrl}
                  />
                </div>
                <div>{item.name}</div>
                <div>规格：{item.specification}</div>
                <div>租赁数量：{item.count}</div>
                <div>租赁时间：{item.tenancy}</div>
                <div>价格：{item.price * item.tenancy * item.count}</div>
              </div>
            </List.Item>
          )}
        />
      </div>
    );
  }
}
